<template lang="pug">
  v-card(flat)
    v-list(subheader v-for ="(item, index) in items" :key="item.criteria.id")
      v-subheader.cyan.lighten-4 {{getName(item.criteria)}}
      v-list-item
        v-list-item-content
          ListPicker(:bundleCriteria="item", multiple=false, @click="$emit('click')")
</template>

<script lang="ts">
  import Vue, {VueConstructor} from 'vue'
  import ListPicker from './_list_picker'
  import {
    OrderBundle,
    Item,
    Criteria,
    getLabelByKey,
    AssetTypes,
    CriteriaFilterTypes, CriteriaOperationTypes
  } from '@/store/modules/types/Bundle'

  export default (Vue as VueConstructor<Vue & {}>).extend({
    props: ['data'],
    name: 'order-bundle-picker',
    components: { ListPicker },

    methods: {
      getName(criteria: Criteria): string {
        let type = getLabelByKey(AssetTypes, criteria.asset_type)
        let category = getLabelByKey(CriteriaFilterTypes, criteria.field_name)
        let operator = getLabelByKey(CriteriaOperationTypes, criteria.operator)
        return `${criteria.quantity}个${category}${operator} ${criteria.field_value} 的${type}`
      },
      getTypesLbl(key: string): string {
        return getLabelByKey(AssetTypes, key)
      },
      getFilterTypesLbl(key: string): string {
        return getLabelByKey(CriteriaFilterTypes, key)
      },
      getOperatorLbl(key: string): string {
        return getLabelByKey(CriteriaOperationTypes, key)
      }
    },
    computed: {
      items(): Item[] {
        return this.bundle.items
      }
    },
    watch: {
      data: {
        immediate: true,
        handler(val) {
          this.bundle = val
        }
      }
    },
    data() {
      return {
        bundle: {} as OrderBundle,
        tab: 0
      }
    },

  })
</script>